Commonly Used CSS Pseudo-Classes
Pseudo-classes allow you to style elements based on their state, position, or relationship without modifying the HTML. Here are some commonly used pseudo-classes:
:hover– Applies styles when the user hovers over an element.:focus– Styles an element when it receives focus (like input fields).:active– Styles an element during activation (e.g., when clicked).:first-child/:last-child– Targets the first or last element among siblings.:nth-child(n)– Styles elements based on their numeric position among siblings.:not(selector)– Selects elements that do not match the given selector.:disabled/:checked– Styles form elements based on their state.:visited/:link– Styles links depending on whether they have been visited.
This example shows how pseudo-classes can dynamically style elements based on user interaction and their position in the DOM.
Use pseudo-classes to reduce extra HTML classes for styling.
Combine pseudo-classes with pseudo-elements (
::before,::after) for advanced effects.Ensure hover or focus styles are not the only method to convey important information for accessibility.
Test pseudo-class behavior across multiple browsers for consistency.